<div>
  <p-growl [value]="msgs"></p-growl>

  <p-gmap #gmap [style]="{'width':'100%','height':'640px'}" [options]="options" [overlays]="overlays" (onMapClick)="handleMapClick($event)"
    (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
  <button type="button" pButton label="Clear" icon="fa-close" (click)="clear()" style="margin-top:10px"></button>
  <button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())" style="margin-top:10px"></button>
  <button type="button" pButton label="Zoom Out" icon="fa-search-minus" (click)="zoomOut(gmap.getMap())" style="margin-top:10px"></button>

  <p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
    <div class="ui-g ui-fluid" *ngIf="selectedPosition">
      <div class="ui-g-2">
        <label for="title">Label</label>
      </div>
      <div class="ui-g-10">
        <input type="text" pInputText id="title" [(ngModel)]="markerTitle">
      </div>

      <div class="ui-g-2">
        <label for="lat">Lat</label>
      </div>
      <div class="ui-g-10">
        <input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()">
      </div>

      <div class="ui-g-2">
        <label for="lng">Lng</label>
      </div>
      <div class="ui-g-10">
        <input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()">
      </div>

      <div class="ui-g-2">
        <label for="drg">Drag</label>
      </div>
      <div class="ui-g-10">
        <p-checkbox [(ngModel)]="draggable" binary="true" [style]="{'margin-top':'.25em'}"></p-checkbox>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker()"></button>
      </div>
    </p-footer>
  </p-dialog>
</div>
